<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>介绍页面</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/introduce.css">
</head>

<body>
  <header class="wrapper">
    <h1>
      基于Web端的车辆信息可视化管理系统
    </h1>
    <div class="mask"></div>
  </header>
  <nav class="wrapper">
    <ul>
      <li>
        <a href="#">项目主页</a>
        <i class="light"></i>
      </li>
      <li>
        <a href="#">用户登录页</a>
        <i class="light"></i>
      </li>
      <li>
        <a href="#">用户注册页</a>
        <i class="light"></i>
      </li>
      <li>
        <a href="#">车辆管理页</a>
        <i class="light"></i>
      </li>
      <li>
        <a href="#">车辆注册页</a>
        <i class="light"></i>
      </li>
      <li>
        <a href="#">信息详情页</a>
        <i class="light"></i>
      </li>
    </ul>
  </nav>
  <!-- 写一个轮播图 -->
  <section class="carousel wrapper">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="./images/banner_1.jpg" alt="...">
        </div>
        <div class="item">
          <img src="./images/banner_2.jpg" alt="...">
        </div>
        <div class="item">
          <img src="./images/banner_3.jpg" alt="...">
        </div>
        <div class="item">
          <img src="./images/banner_4.jpg" alt="...">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section>
  <!-- 技术栈介绍部分 -->
  <section class="introduce wrapper">
    <ul>
      <li>
        <div>
          <a href="https://www.tslang.cn/docs/release-notes/typescript-3.1.html">
            <img src="https://static001.geekbang.org/infoq/a9/a9f81b3b24d5f5d86826908213c1ca02.png" alt="TypeScript" />
          </a>
        </div>
        <h3 class="fire">TypeScript</h3>
        <p>&nbsp;&nbsp;TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。</p>
        <p>&nbsp;&nbsp;TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。</p>
      </li>
      <li>
        <div>
          <a href="https://cn.vuejs.org/">
            <img src="https://inews.gtimg.com/newsapp_bt/0/13843563168/641" alt="Vue3" />
          </a>
        </div>
        <h3 class="fire">Vue3</h3>
        <p>&nbsp;&nbsp;Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。</p>
        <p>
          &nbsp;&nbsp;它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
        </p>
      </li>
      <li>
        <div>
          <a href="https://nodejs.org/zh-cn/">
            <img src="https://sslstatic.ktanx.com/images/release/201522/NDinsWo26SdDxA6t.JPG" alt="NodeJS" />
          </a>
        </div>
        <h3 class="fire">NodeJS</h3>
        <p>
          &nbsp;&nbsp;是一个基于ChromeV8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript运行在服务端的开发平台。
        </p>
        <p>&nbsp;&nbsp;Node.js对一些特殊用例进行优化，提供替代的API，用于方便地搭建响应速度快、易于扩展的网络应用。</p>
      </li>
      <li>
        <div>
          <a href="https://www.mysql.com/">
            <img src="https://dbaplus.cn/uploadfile/2016/1019/20161019055927167.gif" alt="MySQL" />
          </a>
        </div>
        <h3 class="fire">MySQL</h3>
        <p>&nbsp;&nbsp;MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，这样就增加了速度并提高了灵活性。</p>
        <p>
          &nbsp;&nbsp;MySQL由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型和大型网站都选择MySQL作为网站数据库。
        </p>
      </li>
    </ul>
  </section>
  <section class="show wrapper">
    <div class="open">
      <div class="left"></div>
      <div class="right"></div>
      <div class="mask">
        <div class="mask l"></div>
        <div class="mask r"></div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="left">
        <img src="./images/logo.png" alt="logo">
        <h4>成为地球卓越的Web团队</h4>
        <p>Copyright© 2022 <a href="#">AlloyTeam</a>. All Rights Reserved.</p>
        <p><a href="#">粤ICP备15071938号-2</a></p>
      </div>
      <div class="right">
        <ul>
          <li>
            <h4>兄弟团队</h4>
          </li>
          <li><a href="#">腾讯CDC</a></li>
          <li><a href="#">腾讯ISUX</a></li>
          <li><a href="#">腾讯TGideas</a></li>
          <li><a href="#">腾讯FERD</a></li>
          <li><a href="#">百度FEX</a></li>
          <li><a href="#">淘宝FED</a></li>
        </ul>
        <ul>
          <li>
            <h4>友情链接</h4>
          </li>
          <li><a href="#">W3CPlus</a></li>
          <li><a href="#">W3CTech</a></li>
          <li><a href="#">Web前端开发</a></li>
          <li><a href="#">前端观察</a></li>
          <li><a href="#">腾讯大讲堂</a></li>
          <li><a href="#">牛大拿_前端设计导航</a></li>
          <li><a href="#">印记中文</a></li>
        </ul>
        <div class="Qt">
          <div class="Qt-qq">
            <img src="./images/qq-71f7f2.gif" alt="">
            <p>QQ群：162225981</p>
          </div>
          <div class="Qt-wechat">
            <img src="./images/weixin-7531e9.gif" alt="">
            <p>微信公众<br>号:AlloyTeam</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <script src="./js/jquery.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>